<template>
  <div class="app-container">
    <!--filter-->
    <el-form :inline="true" :model="filters" ref="filters" class="demo-form-inline">
      <el-form-item label="操作清算时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerDayStep">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="清算类型">
        <el-select
          v-model="filters.cleanType" width="100%" placeholder="请选择清算类型">
          <el-option :value="-1" label="全部"></el-option>
          <el-option
            v-for="item of consts.CLEAR_TYPE"
            :value="item.value"
            :label="item.title"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作人" prop="operatorName">
        <el-select
          v-model="filters.optPeople" width="100%" placeholder="请选择操作人">
          <el-option
            :label="'全部'"
            :key="consts.ALL"
            :value="consts.ALL"
          ></el-option>
          <el-option
            v-for="(item,index) in operatorList"
            :label="item.optUserName"
            :key="index"
            :value="item.optUserName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm(formLine)">搜索</el-button>
      <el-button v-if="roleCheck('export-clear-record')" class="filter-item" type="primary" icon="el-icon-download" @click="exportHandle">导出</el-button>
      <el-button @click="cancel('filters')">重置</el-button>
    </el-form>
    <!--table-->
    <el-table
      class="el-table-align-center"
      :data="tableData.list"
      border
      v-loading="loading">
      <el-table-column label="清算开始时间">
        <template slot-scope="{row}">
          {{row.clearingStartTime | toTime }}
        </template>
      </el-table-column>
      <el-table-column label="清算结束时间">
        <template slot-scope="{row}">
          {{row.clearingEndTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="授信账户为会员代充总额" prop="amount">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <!--<el-table-column label="剩余上分额度">-->
        <!--<template slot-scope="{row}">-->
          <!--{{row.retrieveAmount | currency}}-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="实际清算额度" prop="clearAmount">
        <template slot-scope="{row}">
          {{row.clearAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="清算类型">
        <template slot-scope="{row}">
          {{ row.cleanType | toClearTypeName }}
        </template>
      </el-table-column>
      <el-table-column label="操作清算时间">
        <template slot-scope="{row}">
          {{row.optTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="操作人">
        <template slot-scope="{row}">
          {{row.operatorName}}
        </template>
      </el-table-column>
    </el-table>
    <!--page-->
    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMemberClearList, exportMembersAllClearList } from '@/services/api/member';
import { getOperatorList } from '@/services/api/audit';
import { form, pickerOption, grid } from '@/build';

export default {
  name: 'credit-clear',
  mixins: [grid, form, pickerOption],
  data() {
    return {
      localSummariesText: '当前页汇总 / 所有页汇总',
      tableData: {},
      operatorList: [],
      filters: {
        proxyId: this.$store.state.member.member_id,
        page: 1,
        size: 20,
        cleanType: -1,
        optPeople: -1,
      },
      form: {
        time: [moment().startOf('month').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
      },
      statistic: [
        {
          index: 2,
          prop: 'amount',
          format: value => <div> {_.currency(value)}  / {_.currency(this.tableData.clearBeforeCount)} </div>,
        },
        {
          index: 3,
          prop: 'clearAmount',
          format: value => <div> {_.currency(value)} / {_.currency(this.tableData.clearAfterCount)}</div>,
        },
      ],
      filterDateType: false,
    };
  },
  methods: {
    cancel(formName) {
      this.resetForm(formName);
      this.form = {
        time: [moment().startOf('month').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')],
      };
      // this.submitFilterForm({
      //   proxyId: this.$store.state.member.member_id,
      //   page: 1,
      //   size: 20,
      //   cleanType: -1,
      //   parentId: undefined,
      // });
      this.submitFilterForm(this.formLine);
    },
    // 导出
    exportHandle() {
      const { proxyId, parentId } = this.filters;
      const maintainTime = this.form.time;
      let startDate;
      let endDate;
      if (!_.isUndefined(maintainTime) && _.isArray(maintainTime)) {
        // startDate = maintainTime[0];
        // endDate = maintainTime[1];
        [startDate, endDate] = maintainTime;
      }
      const ajaxData = {
        proxyId, startDate, endDate, parentId,
      };
      const filename = '代充清算记录.csv';
      const header = ['清算开始时间', '清算结算时间', '已授信额度', '实际清算额度', '操作清算时间', '操作人'];
      const filterField = ['clearingStartTime', 'clearingEndTime', 'amount', 'clearAmount', 'optTime', 'operatorName'];
      exportMembersAllClearList(ajaxData).then(([result, data]) => {
        if (result) {
          const exportData = this.responseFormatter(data.list);
          this.export2Excel(header, filterField, exportData, filename);
        } else {
          this.$message({ message: `导出失败,${data.message}`, type: 'warning' });
        }
      });
    },
    responseFormatter(data) {
      const endData = [];
      data.forEach((item) => {
        endData.push({
          clearingStartTime: _.toTime(item.clearingStartTime),
          clearingEndTime: _.toTime(item.clearingEndTime),
          amount: _.currency(item.amount),
          clearAmount: _.currency(item.clearAmount),
          optTime: _.toTime(item.optTime),
          operatorName: item.operatorName,
        });
      });
      return endData;
    },
  },
  computed: {
    formLine() {
      let obj = { ...this.filters };
      if (this.form.time) {
        obj = {
          ...obj,
          optStartTime: this.form.time[0],
          optEndTime: this.form.time[1],
        };
      }
      return obj;
    },
  },
  filters: {
    toClearTypeName(val) {
      return _.find(consts.CLEAR_TYPE, { value: val }).title;
    },
  },

  mounted() {
    this.bindGet(getOperatorList, 'operatorList', {
      action: 'getOptList',
      sendingData: { proxyId: this.filters.proxyId },
    });
    this.bindGet(getMemberClearList, 'tableData', {
      action: 'getGrid',
      sendingData: 'formLine',
      // beforeSend: (data) => {
      //   const maintainTime = this.form.time;
      //   let startDate;
      //   let endDate;
      //   if (!_.isUndefined(maintainTime) && _.isArray(maintainTime)) {
      //     startDate = maintainTime[0];
      //     endDate = maintainTime[1];
      //     data = { ...this.filters, startDate, endDate };
      //   } else {
      //     data.startDate = undefined;
      //     data.endDate = undefined;
      //   }
      //   return data;
      // },
    });
    this.getAll();
  },
};
</script>
